//灰幕
#shade-gray
  position absolute
  top 0
  left 0
  width 100%
  height 100%
  opacity 0
  z-index -3
  background rgba(0,0,0,0.2)
  transition opacity 0.4s ease, z-index 20ms linear 0.4s

.open-gray #shade-gray
  z-index 8
  opacity 1
  transition opacity 0.4s ease, z-index 0ms linear

//绘图部分背景
.drawing-main
  position absolute
  top 0
  left 0
  width 100%
  height 100%
  background-image url(/img/circuit-grid.svg)
  background-size 20px
  background-position -40px -40px
  background-repeat repeat
  user-select none
  cursor default
  outline none
  &.mouse-line
    cursor url(/cur/mouse_line.cur), crosshair
  &.mouse-movemap
    cursor url(/cur/mouse_move_map.cur), crosshair
  &.mouse-movepart
    cursor url(/cur/mouse_move_part.cur), crosshair
  &.mouse-closepoint
    cursor url(/cur/mouse_close_point.cur), crosshair
  &.mouse-crossdown
    cursor url(/cur/mouse_cross_down.cur), crosshair
  &.mouse-crossup
    cursor url(/cur/mouse_cross_up.cur), crosshair
  &.mouse-crossleft
    cursor url(/cur/mouse_cross_left.cur), crosshair
  &.mouse-crossright
    cursor url(/cur/mouse_cross_right.cur), crosshair

.drawing-main.mouse-selectBox,
#graph-page.select
  cursor url(/cur/mouse_select_box.cur), crosshair

//绘图部分
.drawing-main svg
  height 100%
  width 100%
  overflow hidden
  position relative
  stroke color-parts-normal
  stroke-width 2
  stroke-linecap round
  fill transparent
  g#mouse-control,
  g#area-of-parts
    position absolute
  g#mouse-control
    z-index 2
  g#area-of-parts
    z-index 3

//多选框
.drawing-main svg
  polygon#select-box
    stroke #166CCF
    stroke-width 1.2
    fill #BBDEFB
    opacity 0.3
  polygon#select-box.delet
    opacity 0
    transition opacity 80ms linear

//器件引脚缩放参数
bezier-point-zoom = cubic-bezier(.4,1.3,1,1)
time-point-zoom = 200ms

//器件导线公共属性（普通状态）
#area-of-parts,
#menu-add-parts .parts-list
  path
    stroke-width 2
    stroke color-parts-normal
  rect.focus-part,
  rect.rect-part-point,
  rect.line-rect,
  rect.rect-line-point
    stroke transparent
    fill transparent
  rect.rect-part-point,
  rect.rect-line-point
    x -8.5
    y -8.5
    width 17px
    height 17px
  .white-fill
    fill color-white
    stroke-width 2
    stroke color-parts-normal
  polygon.fill-whole
    fill color-parts-normal
    stroke-width 0
  polygon.fill-stroke
    fill transparent
    stroke-width 2
    stroke color-parts-normal
  //器件引脚
  g.part-point circle
    stroke-width 2
    fill color-parts-normal
    stroke color-parts-normal
  //器件属性文字说明
  text
    fill color-parts-normal
    font-family font-text
    font-size 16px
    stroke-width 0
    tspan:nth-child(2)
      font-size 10px
  //导线引脚
  g.line-point circle
    fill #FFFFFF
    stroke-width 2
    stroke color-parts-normal
  g.line-point.cross-point circle
    fill color-parts-normal
  g.line-point.dispear
    opacity 0

//器件导线公共属性（被选中状态）
#area-of-parts g.focus
  path
    stroke color-parts-focus
  .white-fill
    stroke color-parts-focus
  polygon.fill-whole
    fill color-parts-focus
  polygon.fill-stroke
    stroke color-parts-focus
  g.part-point circle
    fill color-parts-focus
    stroke color-parts-focus
  text
    fill color-parts-focus
  g.line-point circle
    stroke color-parts-focus
  g.line-point.cross-point circle
    fill color-parts-focus

//器件属性
#area-of-parts
  g.editor-parts
    g.part-point circle
      transition r time-point-zoom bezier-point-zoom
    g.part-point.point-open circle
      r 0
    g.part-point.point-open:hover circle
      r 5
    g.part-point.point-close circle
      r 2

//导线属性
#area-of-parts g.line
  g.line-point circle
    cx 0
    cy 0
    transition r time-point-zoom bezier-point-zoom, stroke-dasharray time-point-zoom bezier-point-zoom
  g.draw-open circle
    r 4
    stroke-dasharray 1.5,4
  g.draw-open:hover circle
    r 8
    stroke-dasharray 3,4
  g.draw-close circle
    r 2
    stroke-dasharray 0,0
  g.cross-point circle
    r 2
  g.cross-point:hover circle
    r 6

//右键菜单
#right-button-menu
  cursor default
  width 200px
  position absolute
  z-index 10
  box-shadow 2px 2px 5px color-gray
  left 0
  top 0
  background #F5F5F5
  border 1px solid #aaaaaa
  display none
  list-style-type none
  padding 0
  margin 0
  .right-space
     height 4px
  .right-line
     height 8px
     &:before
       position absolute
       height 1px
       background #c0c0c0
       width 90%
       content ""
       transform translate(5%,4px)
  .right-button-option
    padding 4px 0 4px 0
    transition background 0.1s linear
    font-family font-default
    font-size 14px
    .option-description
      color  color-black
      margin-left 16px
    .option-key
      margin-right 16px
      float right
      color color-shadow
      font-size 14px
    &:hover
      background #c2e1ff
    &.disable
      .option-description
        color #888
      &:hover
        background #F5F5F5

#right-button-menu
  display none

#right-button-menu.right-parts,
#right-button-menu.right-part,
#right-button-menu.right-line,
#right-button-menu.right-map
  display block

#right-button-menu.right-part
  #parts-paste,
  #right-undo
    display none

#right-button-menu.right-parts
  #edit-parameters,
  #right-line-1,
  #parts-paste,
  #right-undo
    display none

#right-button-menu.right-line
  #edit-parameters,
  #right-line-1,
  #parts-copy,
  #parts-cut,
  #parts-Paste,
  #right-line-2,
  #clockwise-direction,
  #anticlockwise-direction,
  #X-Mirror,
  #Y-Mirror,
  #right-line-3,
  #parts-all,
  #parts-paste,
  #right-undo
    display none

#right-button-menu.right-map
  #edit-parameters,
  #right-line-1,
  #parts-copy,
  #parts-cut,
  #parts-delete,
  #clockwise-direction,
  #anticlockwise-direction,
  #X-Mirror,
  #Y-Mirror,
  #right-line-3
    display none

#load-cover
  position absolute
  background rgba(20, 20, 20, 0.95)
  height 100%
  width 100%
  z-index 10
  opacity 1
  transition opacity 200ms linear
  #cover-inner
    border-radius 25px
    background-color  #222
    box-shadow 0 0 10px #000000
    position absolute
    top 0
    left 0
    right 0
    bottom 0
    margin auto
    width 200px
    height 180px
    text-align center
    h3
      font-family font-text
      margin 0
      padding 0
      font-size 18px
      font-weight normal
      line-height 60px
      color #999
      text-shadow 1px 1px 2px black
    .spinner
      animation rotator 1.4s linear infinite
      .path 
        stroke-dasharray 187
        stroke-dashoffset 0
        transform-origin center
        animation dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite

@-webkit-keyframes rotator 
  0% 
    -webkit-transform rotate(0deg)
    transform rotate(0deg)
  100% 
    -webkit-transform rotate(270deg)
    transform rotate(270deg)

@keyframes rotator 
  0%
    -webkit-transform rotate(0deg)
    transform rotate(0deg)
  100%
    -webkit-transform rotate(270deg)
    transform rotate(270deg)